<template>
  <el-card class="shop-home">
    <h2>商家主页</h2>
    <el-form :inline="true" class="search-form">
      <el-form-item label="商家ID">
        <el-input v-model="sellerId" placeholder="输入商家ID" style="width: 200px;" />
      </el-form-item>
      <el-form-item label="排序">
        <el-select v-model="sortBy" style="width: 100px;">
          <el-option label="价格" value="price" />
          <el-option label="名称" value="name" />
          <el-option label="库存" value="quantity" />
        </el-select>
      </el-form-item>
      <el-form-item label="顺序">
        <el-select v-model="order" style="width: 100px;">
          <el-option label="升序" value="asc" />
          <el-option label="降序" value="desc" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchShop">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="cards" style="width: 100%; margin-top: 20px;">
      <el-table-column prop="card.code" label="卡牌编号" width="120" />
      <el-table-column prop="card.name" label="名称" width="180" />
      <el-table-column prop="price" label="价格" width="100" />
      <el-table-column prop="quantity" label="库存" width="100" />
    </el-table>
    <el-empty v-if="cards.length === 0" description="暂无在售卡牌" />
    <el-alert v-if="msg" :title="msg" type="info" show-icon class="msg-alert" />
  </el-card>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const sellerId = ref('')
const cards = ref([])
const sortBy = ref('price')
const order = ref('asc')
const msg = ref('')

const fetchShop = async () => {
  try {
    const res = await axios.get(`/shop/${sellerId.value}/cards`, { params: { sort_by: sortBy.value, order: order.value } })
    cards.value = res.data
    msg.value = ''
  } catch (e) {
    msg.value = e.response?.data?.detail || '查询失败'
    ElMessage.error(msg.value)
  }
}
</script>

<style scoped>
.shop-home {
  max-width: 700px;
  margin: 40px auto;
  padding: 32px 24px;
  border-radius: 12px;
  background: #f8f9fa;
}
.search-form {
  margin-bottom: 16px;
}
.msg-alert {
  margin-top: 16px;
}
</style> 